<template>
  <div class="contain">
    <linkbar v-for="bar in bars" :key="bar.name" :icon="bar.icon" :name="bar.name" :url="bar.url" />
  </div>
</template>

<script>
import linkbar from '@/components/LinkBar/'

export default {
  name: 'LinkBar2',
  components: { linkbar },
  data() {
    return {
      bars: [
        { icon: 'zhihu', name: '知乎', url: 'http://www.zhihu.com' },
        { icon: 'douyin', name: '抖音', url: 'http://www.douyin.com' },
        { icon: 'toutiao', name: '今日头条', url: 'http://www.toutiao.com' }
      ]
    }
  }
}
</script>

<style>
.contain {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  /* grid-template-rows: repeat(auto-fill, 150px); */
  justify-content: center;
  justify-items: center;
  /* background-image: linear-gradient(#e66465, #9198e5); */
}

</style>
